const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const resolve = (dir) => {
    return path.join(__dirname, dir);
};
const commonCssloader = [
    MiniCssExtractPlugin.loader,
    'css-loader','postcss-loader']
    // 
module.exports = {
    entry: ['./src/js/index.js', './src/index.html'],
    output: {
        filename: 'built.js',
        path: resolve("build")
    },
    devtool: 'eval-cheap-module-source-map',
    module: {
        rules: [
            // {
            // oneOf: [
            {
                test: /\.css$/,
                use:["style-loader",'css-loader']
                

            },
            {
                test: /\.less$/,
                use: [...commonCssloader, 'less-loader']
            },
            {
                test: /\,scss$/,
                use: [...commonCssloader, 'sass-loader']
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                type: 'asset',
                generator: {
                  // 输出文件位置以及文件名
                  // [ext] 自带 "." 这个与 url-loader 配置不同
                  filename: "[name][hash:8][ext]"
                },
                parser: {
                  dataUrlCondition: {
                    maxSize: 50 * 1024 //超过50kb不转 base64
                  }
                }
              }
        ,
            {
                test: /\.html$/,
                use: [
                    "cache-loader",
                    'html-loader'
                ]
            },
            {
                exclude: /\.(png|gif|jpg|html|js|css)$/,
                use: [
                    "cache-loader",
                    'file-loader'
                ]
            },
            {
                test: /\.js$/,
                use: [
                    "cache-loader",
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [//告诉bable用什么方式处理
                                '@babel/preset-env'
                            ]
                        }
                    },
                ]

            }
           ]
             

        
    },
 
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: './css/built.css'
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        // new BundleAnalyzerPlugin({
        //     analyzerMode: 'server',
        //     analyzerHost: '127.0.0.1',
        //     analyzerPort: 8889,
        //     reportFilename: 'report.html',
        //     defaultSizes: 'parsed',
        //     openAnalyzer: true,
        //     generateStatsFile: false,
        //     statsFilename: 'stats.json',
        //     statsOptions: null,
        //     logLevel: 'info'
        // }),
    ],
    mode: 'production',
    devServer: {
        static: './build',
        port: 8000,
        open: true,
        compress: true,
        hot: true//热加载
    }
}